<template>
  <!-- 打字机效果 -->
    <div class="typewriter-effect">
        <div class="text" id="typewriter-text"></div>
    </div>
</template>

<script>
export default {
  name: 'TextWriterEffect',
  mounted () {
    const typeWriter = document.getElementById('typewriter-text')
    const text = 'Lorem ipsum dolor sit amet.'

    typeWriter.innerHTML = text
    typeWriter.style.setProperty('--characters', text.length)
  }
}
</script>

<style lang="less" scoped>
.typewriter-effect{
    display: flex;
    align-items: center;
    font-family: monospace;
    height: 50px;
    background-color: #000;
    .text{
        color: #fff;
        max-width: 0;
        animation: typing 3s steps(var(--characters)) infinite;
        white-space: nowrap;
        overflow: hidden;
        // border: solid;
    }
    &::after{
        content: '|';
        animation: blink 1s infinite;
        animation-timing-function: step-end;
    }
}

    @keyframes typing {
        75%,
        100% {
            max-width: calc(var(--characters) * 1ch);
        }
    }

    @keyframes blink {
        0%,
        75%,
        100% {
            opacity: 1;
        }
        25% {
            opacity: 0;
        }
    }
</style>
